Website Setup
Installation, design and layout of a good website. Includes colors, fonts, layout, interface. "Your online presence says a lot about your personal brand. It allows you to build credibility as a professional and create a voice for yourself within your industry." ''- Heather R. Huhman on Personal Branding Blog, Jan 20, 2015.'' Resources * Google Webmaster Tools: crucial for SEO (getting started + geotargeting) * Keeping your WordPress safe (article by Carl Alexander, March 1, 2015) Design * Unicode / UTF8 character reference on W3Schools * Introduction and advice for color psychology * Font curators ** Typewolf: 40 best Google Fonts ** Beautiful Web Type: best Google Fonts ** Font Pair: helping to pair Google Fonts ** Typ.io: Google Fonts implementation examples * Font inspiration ** 56 best free fonts for designers (Creative Bloq) ** 100 greatest fonts (Awwwards) Design Tools * Make seamless/tileable textures * Make/edit SVG icons: IconSVG * Make patterns: Patternify * Create CSS colors: ColorMe * Determine the right font sizes: Modular Scale * Color Scheme / Palette ** Coolors to generate schemes/palettes ** Adobe CC or Paletton to design one ** ColourLovers for implementation examples ** Dribbble for implementation examples Learn Design / Advice * Knowledge resource for CSS, HTML, JS and more: Know it all * Never use perfect black (#000000). Here's an article about why. * Copy: ideal line length is 50-60 characters * Try to have at least 300 words of content on each page * Disable scroll-scaling in Google Maps Erik D. Kennedy in his e-mail about a button: * Letterforms are SHAPES. You can analyze fonts as sets of shapes, not simply as works of art * You should letter-space uppercase text, since most fonts were designed for sentence-case * Think in HSB to modify colors * You can find variations on a “generally correct” color by playing with the hue * Saturation and brightness are levers that move in opposite direction to control luminosity * Find colors that match the same descriptors that you would give your typeface and your overall brand * Even something as simple as shadows can match the brand you're creating * For inline icons, make them appear as though they were drawn with the same pen as the font you’re using Basic Design Principles * Decide which grid layout you want ** Before doing anything else ** Draw it on paper, for instance ** Tranfici recommends these services: *** Grid System 960 *** Gridr Buildrrr *** Design by Grid * Make it look simple and familiar ** e.g. blog should look like a blog * Advice from Psychotactics: ** Totally and easily updateable ** Minimal, fast loading graphics * Usable and mobile * Calls to Action * Always Changing * Visuals: visitor sees my site before reading it * Design needs to follow marketing: identify ideal customer, name & tagline, brand promise * Write my own style guide for reference * Pick the right colours for your business (ideally 2, max 3) ** Refer to Bourn Creative's article series on colour meaning! 11 Reasons Why it doesn't Sell Article on Entrepreneur, by Firas Kittaneh, Oct 30, 2014 # Low-quality visuals # No reviews/testimonials # Badly chosen colors # Outdated information # Hard to find (SEO) # Not mobile-friendly # Contact info hard to find # Not focused on user # Requires sign-ups # Auto-playing audio/video # Painfully slow User's First Impression * Ambiance! ** How does the site look on different devices? *** Needs a responsive design ** How does typography influence word consumption? Easy to grasp? *** A welcoming layout ** How does layout influence eye movement? *** Uncluttered tracking eyes down the page * Too much info is overwhelming. Readers avoid * Reduce info, increase white space for accessibility (example: Couchsurfing (May 29, 2014)) ** White space: space between content and borders (breathing room) Elements * What’s my site’s grid? Divide content up with invisible grid lines * Columns: should be 450-550 pixels wide * Have a social log-in option "The Power of 3" * Article on Psychotactics * The brain finds it easy to grasp threes: elements, colours, fonts '''- building blocks of visual communication! ** Colours: look up colour symbolism to find the colours that fit your message * Keep the 3 elements compact so they don't break down into sub-elements * Keep fonts and styles consistent ** But add some contrast for drama: e.g. wide vs. vertical fonts * Article gives examples: McDonald's, Coke - only few elements! User Interface/Experience (UI, UX) Erik Kennedy: 7 rules for Creating Gorgeous UI (Part 1 | Part 2) # Add '''light from above to elements (shadow below them or their inset borders) #* e.g. buttons, sliders #* Inset '''elements: #** Text fields #** Pressed buttons #** Slider tracks #** Radio buttons (pressed) #** Check boxes #* '''Outset '''elements: #** Radio buttons (unpressed) #** Unpressed buttons #** Slider buttons #** Dropdown buttons #** Maps #** Popups # Design in '''Grayscale first! (example: Uber) #* This makes it clean and simple #* Add colours later: keep them relevant and don't overdo them #** e.g. grayscale + 1 or 2 colours #** or: grayscale + shades of the same color # Use White Space #* See examples in article # Be smart about overlaying pictures with text #* Avoid just writing on it unless you have good contrast #* Overlay the entire image (transparent black layer) #* Put the text in a box (add e.g. transparency, rounded corners) #* Blur the image #* Floor fade: gradient to black at bottom of image #* Diffuse the text's background # Emphasize text: pop up or down #* Pop up: styles that make text more visible, e.g. bold, capitals... #* Pop down: styles that make text less visible, e.g. small letters, low contrast... #* Other factors: color, size #* Balance these to highlight content or remove it from attention # Use nice fonts #* Examples in the article # Steal. Cherry-pick. #* Check out designers on Dribbble (examples in the article) #* Flat UI Pinboard (Pinterest) #* Pttrns # Align everything (this is from a later newsletter!) #* Use lines '''(can well be invisible) to give visual structure and alignment to all elements of your design Basic Layout * Big CTA must stand out! ** e.g. build mailing list * '''Home: first impression (first 5 seconds are extremely important) ** Present content in F shape! (this is how readers look at page) ** Most important information needs to be above the fold (before scrolling down) ** Where do the eyes gravitate right away? ** What kind of information does one see? *** Does it highlight a problem clients may not know they have? ** Highlight the path and action I want readers to take *** Guide my visitors through the page *** Use leading questions (addressing doubts, problems) ** Hierarchy: Most important => Supporting (Details, CTA) => Least important ** Beyond home page: secondary pages with product details, case studies... * About: talk about reader first, wrap up with why I'm trustworthy, + photos, + testimonials * Contact: easy to find so visitors can get in touch ** Have a prominent Opt-In * Blog: good formatting, lots of images (at least 1 pinnable!), call to action * Resources: archive of useful links and contents for me & audience ** Easily accessible (menu link) ** Well-structured and sorted ** Include books (Amazon links) ** Track pageviews and clicks Advanced Structuring Guiding Visitors * In general: all paths must lead to my buy/contact page * Use nonverbal cues ** Visible hands establish trust ** Use hands and eyes to direct ** Understand facial expressions Typical path of visitors' attention # Logo # Main navigation menu # Search box # Social networking links # Primary image (whatever image was at the top of the repeating header or page) # Written content # Website footer Landing Page A page where you send users when you want them to take a specific action. Example page. * Have a strong headline * Make it clean '''and '''uncluttered ** Don't use the same design as the rest of your page ** Lots of white space, single column ** Only use relevant and meaningful visuals * Aesthetics: '''give your landing page a good, coherent '''look and feel ** Tastefully tailor fonts, colors, visuals to your audience ** Stay in line with your other materials (e.g. the original ad) * Ask for only one action ** Choice confuses * Nail the content above the fold! People may not scroll down. ** Upper 300 pixels of the page * Move the user along the page towards a desired goal ** Subscribe ** Book a consultation ** Join the community ** Purchase ** ... * Headline: refer to the place or ad copy the user came from! * Have a clear CTA * Second person: you, your * Deliver a clear, persuasive message ** Make it crystal clear. No digressions ** Make the copy tight (not necessarily short) * Most important points: beginning of paragraphs, bullets ** People read beginnings and ends first * First paragraph: short, no more than 1-2 lines! ** Never more than 4-5 lines in follow-up * Plan your layout: how much will be visible above the fold? * Ask for little: the easier it is to sign up, the better * Test everything. Essential Elements To sum up: # Headline: catch attention instantly # Benefits: tease, e.g. with fascinating bullet points # Call to action: expressly tell ppl what to do (e.g. sign up) # Opt-in form: the way to sign up # Social proof: (recommended) #* Number of subscribers #* Testimonials #* Reviews #* Media mentions #* ... Analytics, Metrics * Ebook by Copyblogger: "Landing Pages: How to Turn Traffic into Money" ** Includes a chapter about metrics and tracking of conversion rates ** Also includes excellent advice on analytics Colors Guide for Web Developers * Choose a base color ** Everything stems from this color ** Try color modules in Dribble, Designspiration ** Ex.: use client's existing color ** Don't use competitors' colors ** Consider target audience ** Avoid stereotypes ** Play word game, then look up symbolism * Create palette from base color ** 3 neutral colors: white, dark grey, light grey (optional) ** Plus base color (established) ** Plus accent color ** Accent is '''only used rarely' to stand out'' ** Finding accent: e.g. Paletton *** "Add complementary" button *** Other controls on Paletton * Create greys! ** Dark grey: for text ** Light grey: for differentiation from white ** Grab a basic desaturated grey ** Mix in base color (e.g. by adding 5% opaque layer) See Design Resources above to find color schemes etc. * Understand color psychology (intro and reference here) ** Also here: color symbolism / 12 colors and associated emotions * Pam Wilson on toning down colours and choosing the right ones * Never use black: it overpowers other colors. Saturate it! * Pick 2 colours that make sense to my market / support my message ** Psychotactics recommends 3 * Check what the market already uses Fonts, Type, Text Styling * How to choose fonts for design (Apr 11, 2017) ** What is the purpose and medium of your design? Harmonize your type with it. ** Identify your audience: age, interest, culture ** Kids: highly legible fonts with generous letter shapes ** Seniors: readable sizes, high contrasting colors, avoid scripts & decorative styles ** Look for inspiration (see resources above!) ** Keep criteria in mind: readability, legibility, purpose ** Use Modular Scale to determine font sizes * List of web-safe fonts (common to Mac and Windows) * Inspiration for text input effects! * Fonts / typeface: serif, sans? Both? ** Serif: classic, timeless, established. Long paragraphs ** Sans Serif: cutting-edge, modern ** Both: compare letters a, g, e ** Custom typefaces are possible ** Use 2-3 fonts, tops ** More on fonts on Bourn Creative! * Copyblogger about fonts and text: ** Should be black on white background ** Use large font size ** Typeface: prioritize readibility ** One font for headers, one for text ** Links should be underlined ** Short paragraphs ** Columns: 450-550 pixels, not more __FORCETOC__